<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
<h:outputStylesheet name="estilos-catalogos.css" library="css"></h:outputStylesheet>
<script type="text/javascript">
function llenarCampos()
{
 	document.getElementById("formProvincia:txtCodigo").value=' ';
	document.getElementById("formProvincia:txtNombre").value=' ';
}

</script>
</h:head> 
<body> 
<h:form id="formProvincia">
<p:panel header="Provincia">
<p:panelGrid columns="3" styleClass="gridCatalogos" >
<h:outputText value="Pa&#237;s" />
<h:selectOneMenu value="#{provinciaController.idPais}" id="listaPaises">
<f:selectItems value="#{provinciaController.listaPaises}"></f:selectItems>
<p:ajax event="change" listener="#{provinciaController.obtenerTablaProvincia()}" update="tablaProvincia" ></p:ajax>
</h:selectOneMenu>
<h:inputText value="#{provinciaController.idProvincias}" id="txtProvincia" />
<h:outputText value="C&#243;digo" />
<p:inputText id="txtCodigo" value="#{provinciaController.codigoProvincia}" required="true" label="C&#243;digo" maxlength="3" requiredMessage="Favor ingrese un valor"/>
<p:message for="txtCodigo" id="msnCodigo"/>
<h:outputText value="Nombre" />
<p:inputText id="txtNombre" value="#{provinciaController.nombreProvincia}" required="true" label="Nombre" requiredMessage="Favor ingrese un Nombre"/>
<p:message for="txtNombre" id="msnNombre"/>
<h:outputText value="Estado" />
<h:selectOneMenu value="#{provinciaController.idEstadoProvincia}" id="listaEstados">
<f:selectItems value="#{provinciaController.listaEstado}"></f:selectItems>
</h:selectOneMenu>
</p:panelGrid>
<f:facet name="footer">
<p:commandButton id="btnAgregar" value="Agregar" action="#{provinciaController.guardarProvincia()}" update="@form"></p:commandButton>
</f:facet>
<f:facet name="footer">
<p:commandButton id="btnCancelar" value="Cancelar" action="#{provinciaController.cancelarProvincia()}" update="@form"></p:commandButton>
</f:facet>
</p:panel>
<p:messages id="mensajes" showDetail="true" globalOnly="true"></p:messages>
<p:dataTable id="tablaProvincia" value="#{provinciaController.listaProvincias}" var="provincia" rowKey="#{provincia.idProvincia}" rowIndexVar="row"> 
<p:column>
<f:facet name="header">#</f:facet>
<h:outputText value="#{row + 1}" />
</p:column>
<p:column >
<f:facet name="header">Pa&#237;s</f:facet>
#{provincia.nombrePais}
</p:column>
<p:column sortBy="#{provincia.codigoProvincia}">
<f:facet name="header">C&#243;digo</f:facet>
#{provincia.codigoProvincia}
</p:column>
<p:column sortBy="#{provincia.nombreProvincia}">
<f:facet name="header">Provincia</f:facet>
#{provincia.nombreProvincia}
</p:column>
<p:column sortBy="#{provincia.estadoProvincia}">
<f:facet name="header">Estado</f:facet>
#{provincia.estadoProvincia == 'A'?"Activo":"Inactivo" }
</p:column>
<p:column headerText="Operaciones">
	<p:commandLink value="Editar" action="#{provinciaController.editarProvincia(provincia.idProvincia)}" onclick="llenarCampos()" update="@form"></p:commandLink>
</p:column>
</p:dataTable>
</h:form>
</body> 
</html>
